<template>
    <div class="user_message">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="名称">
                <el-input v-model="formInline.title" placeholder="名称"></el-input>
            </el-form-item>
            <el-form-item label="商品描述">
                <el-input v-model="formInline.description" placeholder="商品描述"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <el-button type="primary" @click="Delete">批量删除</el-button>
        <el-button type="primary" @click="dialogFormVisible = true">添加</el-button>
        <el-table
                ref="multipleTableRef"
                :data="tableData"
                style="width: 100%"
                @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55"/>
            <el-table-column property="id" label="编号" width="120"/>
            <el-table-column property="title" label="名称" width="120"/>
            <el-table-column label="图片" width="120">
                <template #default="scope">
                    <img :src="`http://127.0.0.1:8081/product/${scope.row.picture}`" alt="" height="50" width="50">
                </template>
            </el-table-column>
            <el-table-column property="price" label="价格" width="120"/>
            <el-table-column property="stock" label="库存" width="120"/>
            <el-table-column property="description" label="描述" width="200"/>
            <el-table-column label="操作" width="180px">
                <template #default="scope">
                    <el-button type="danger" size="small" @click="queryById(scope.row.id)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <el-dialog v-model="dialogFormVisible" title="添加商品">
        <el-form :model="createForm" label-width="120">
            <el-form-item label="商品名称">
                <el-input v-model="createForm.title"/>
            </el-form-item>
            <el-form-item label="图片">
                <el-upload
                        v-model:file-list="fileList"
                        :auto-upload="false"
                        :limit="1"
                >
                    <el-button type="primary">上传</el-button>
                </el-upload>
            </el-form-item>
            <el-form-item label="商品价格">
                <el-input v-model="createForm.price"/>
            </el-form-item>
            <el-form-item label="建议售价">
                <el-input v-model="createForm.new_price"/>
            </el-form-item>
            <el-form-item label="描述信息">
                <el-input v-model="createForm.description"/>
            </el-form-item>
            <el-form-item label="库存">
                <el-input v-model="createForm.stock"/>
            </el-form-item>
            <el-form-item label="推荐状态">
                <el-input v-model="createForm.recommended"/>
            </el-form-item>
            <el-form-item label="图集">
                <el-upload
                        v-model:file-list="fileLists"
                        :auto-upload="false"
                        list-type="picture-card"
                        :limit="4"
                        multiple="multiple"
                >
                    <el-icon>
                        <Plus/>
                    </el-icon>
                </el-upload>
            </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="create">
              添加
            </el-button>
          </span>
        </template>
    </el-dialog>
    <el-dialog v-model="editDialogFormVisible" title="编辑商品">
        <el-form :model="editForm" label-width="120">
            <el-form-item label="商品名称">
                <el-input v-model="editForm.title"/>
            </el-form-item>
            <el-form-item label="图片">
                <el-upload
                        v-model:file-list="editFileList"
                        :auto-upload="false"
                        :limit="1"
                >
                    <el-button type="primary">上传</el-button>
                </el-upload>
            </el-form-item>
            <el-form-item label="商品价格">
                <el-input v-model="editForm.price"/>
            </el-form-item>
            <el-form-item label="建议售价">
                <el-input v-model="editForm.new_price"/>
            </el-form-item>
            <el-form-item label="库存">
                <el-input v-model="editForm.stock"/>
            </el-form-item>
            <el-form-item label="描述信息">
                <el-input v-model="editForm.description"/>
            </el-form-item>
            <el-form-item label="推荐状态">
                <el-input v-model="editForm.recommended"/>
            </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="editDialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="modify">
              保存
            </el-button>
          </span>
        </template>
    </el-dialog>
</template>
<style>
.user_message {
    margin: 20px 0px 0px 10px;
}

.user_message .el-table {
    margin-top: 10px;
}

.block {
    margin-top: 10px;
}
</style>
<script setup>
import {onMounted, ref, reactive, toRaw} from 'vue'
import {ElMessageBox, ElTable} from 'element-plus'
import goodApi from '../../api/goods.js'
import axios from 'axios'
import router from '../../router/index.js'
import {ElMessage} from "element-plus";


const tableData = ref([]);

const pictures = ref([]);
const store = async () => {

    const res = await goodApi.queryBySid();
    tableData.value = res.data;

};
onMounted(() => {
    store();
})
const formInline = reactive({
    title: '',
    description:''
})


const onSubmit = async () => {
    const res = await goodApi.queryByAccount(formInline)
    if(res){
        tableData.value=res.data
    }
}

//添加

const dialogFormVisible = ref(false)
const createForm = reactive({
    title: '名称',
    picture: 'picture',
    price: '0',
    new_price: '0',
    stock: 1000,
    description: '描述',
    recommended: 1,
    pictures: 'pictures'
})
const fileList = ref([])
const fileLists = ref([])
const type = {type: 'application/json'}

const create = async () => {
    let formData = new FormData();
    formData.append("multipartFile", fileList.value[0].raw);

    for (let i = 0; i < fileLists.value.length; i++) {
        formData.append("multipartFiles", fileLists.value[i].raw)
    }
    formData.append("product", new Blob([JSON.stringify(toRaw(createForm))], type))
    const res = await goodApi.create(formData)
    if (res.data) {
        dialogFormVisible.value = false
        ElMessage.success('添加成功');
        store()
    } else {
        ElMessage.error('添加失败');
    }
}
const multipleTableRef = ref([])
let multipleSelection = ref([])
let ids
const handleSelectionChange = (val) => {
    multipleSelection.value = val
    console.log(multipleSelection._rawValue)
    ids = [];
    for (let i of multipleSelection._rawValue) {
        ids.push(i.id)
    }
    console.log(ids)
}
//批量删除
const Delete = async () => {
    ElMessageBox.confirm(
        '确定删除这个会员记录吗？',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        console.log(11)
        axios.post('http://127.0.0.1:8080/product/deletes', ids).then(res => {
            if (res.data) {
                ElMessage.success('删除成功')
                store()
            } else {
                ElMessage.error('删除失败')
            }
        }).catch(Error => {
            console.log(error)
        })
    }).catch(() => {
        ElMessage.info('取消删除')
    })
}
//编辑
const editDialogFormVisible = ref(false)
let editForm = reactive({
    title: '',
    picture: '',
    price: '',
    new_price: '',
    stock: '',
    description: '',
    recommended: 1,
})

const editFileList = ref([])
const queryById = async (id) => {
    axios.get('http://127.0.0.1:8080/product/queryById/' + id).then(res => {
        if (res.data) {
            editDialogFormVisible.value = true;
            editForm.title = res.data.title
            editForm.price = res.data.price
            editForm.new_price = res.data.new_price
            editForm.picture = res.data.picture
            editForm.description = res.data.description
            editForm.stock = res.data.stock
            editForm.recommended = res.data.recommended
        }
    }).catch(Error => {
        console.log(error)
    })
}

const modify = async () => {
    editForm.files = editFileList
    if (toRaw(editForm.files).length !== 0) {
        editForm.file = editForm.files[0].raw;
    } else {
        editForm.file = null
    }
    editForm.product = new Blob([JSON.stringify(toRaw(editForm))], type);
    editDialogFormVisible.value = false

    const res = await goodApi.modify(editForm)
    if (res.data) {
        ElMessage.success('编辑成功');
        store()
    } else {
        ElMessage.error('编辑失败');
    }
}

</script>